<template>
	<a-modal :visible="visible" width="500px" title="预定规则" centered destroyOnClose @cancel="cancel" :footer="null" :maskClosable="false" wrapClassName="a-modal-dialog" :bodyStyle="{padding: 0}">
		<a-form ref="formRef" layout="vertical" :model="modelRef" class="flex-container-nomal" @finish="run">
			<div class="flex1 auto-y">
				<a-row :gutter="16">
					<a-col :span="15">
						<a-form-item label="预定定金" name="num" :rules="[{required: true, message: `请输入${modelRef.rule === 1 ? '金额' : '比例'}`}]">
							<a-input-group compact style="display: flex">
								<a-form-item-rest>
									<a-select style="width: 150px" v-model:value="modelRef.rule" :options="ruleOptions" @change="modelRef.num = null" />
								</a-form-item-rest>
								<template v-if="modelRef.rule === 1">
									<a-input-number v-model:value="modelRef.num" :min="0.01" :precision="2" placeholder="请输入金额">
										<template #addonAfter>元</template>
									</a-input-number>
								</template>
								<template v-else>
									<a-input-number v-model:value="modelRef.num" :min="0.01" :max="100" :precision="2" placeholder="请输入比例">
										<template #addonAfter>%</template>
									</a-input-number>
								</template>
							</a-input-group>
						</a-form-item>
					</a-col>
					<a-col :span="9">
						<a-form-item label="定金有效期" name="day" :rules="[{required: true, message: '请输入定金有效期'}]">
							<a-input-number v-model:value.number="modelRef.day" :min="1" :max="100" :precision="0" placeholder="请输入定金有效期">
								<template #addonAfter>天</template>
							</a-input-number>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="可提前预定天数" name="preBookDays" :rules="preBookDaysValid">
							<a-input-number v-model:value.number="modelRef.preBookDays" :min="1" :precision="0" placeholder="请输入可提前预定天数">
								<template #addonAfter>天</template>
							</a-input-number>
							<span v-color="{color: 'danger'}" style="margin: 4px 0 0 10px">仅对已租房源有效</span>
						</a-form-item>
					</a-col>
					<a-col :span="24">
						<a-form-item label="预定规则" name="content" :rules="[{required: true, message: '请填写预定规则'}]">
							<a-textarea v-model:value="modelRef.content" placeholder="请输入预定规则" :rows="4" :maxlength="120" showCount />
						</a-form-item>
					</a-col>
				</a-row>
			</div>
			<div class="a-modal-dialog-footer">
				<a-space :size="12">
					<a-button @click="cancel">取消</a-button>
					<a-button type="primary" html-type="submit" :loading="loading" :disabled="loading">确定</a-button>
				</a-space>
			</div>
		</a-form>
	</a-modal>
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {useRequest} from 'vue-request'
	import {getHouseBookRule, houseBookRuleInsert} from '@/api/contract'
	import {message} from 'ant-design-vue'

	const modelRef = reactive({
		content: null,
		id: null,
		day: null,
		num: null,
		preBookDays: null,
		rule: 1
	})

	const ruleOptions = [
		{
			label: '固定金额',
			value: 1
		},
		{
			label: '房租比例',
			value: 2
		}
	]

	const props = defineProps({
		visible: {
			type: Boolean,
			required: true
		}
	})
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
		resetForm()
	}

	const sendRequest = () => {
		return houseBookRuleInsert(modelRef)
	}

	const {run, loading} = useRequest(sendRequest, {
		manual: true,
		formatResult: (res: any) => {
			if (res.code == 200) {
				message.success('操作成功')
				setTimeout(() => {
					emit('success')
					cancel()
				}, 300)
			}
		}
	})

	const preBookDaysValid: any = [
		{
			required: false,
			validator: async (rule, value, callback) => {
				// 不存在 || 值为小于60的正数
				if(!value) return Promise.resolve()
				return value > 0 && value <= 60 ? Promise.resolve() : Promise.reject('请输入小于60的正数天数')
			}
		}
	]

	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getHouseBookRule().then((res: any) => {
					Object.assign(modelRef, res.data || {})
				})
			}
		}
	)
	// 重置表单
	const formRef = ref<any>()
	const resetForm = () => {
		formRef.value.resetFields()
		modelRef.rule = 1
	}
</script>
<style lang="less"></style>
